<template>
  <div>
    <component
      :is="getCurrentQuestionView"
      :submitAnswer="submitAnswer"
      :question="cur"
      :imgUrl="data.pic_addr"
      :mp3Addr="data.mp3_addr"
      :mp4Addr="data.mp4_addr"
      :userTestId="data.userTestId"
    ></component>
    <!-- 弹出 -->
    <div class="black" v-show="showResultModel" @click="goNextQuestion()"></div>
    <div class="error" v-show="showResultModel" @click="goNextQuestion()">
      <div class="flex aicenter jccenter errorImg">
        <img :src="getResultImage" alt />
      </div>
    </div>
  </div>
</template>
<script>
import SingleSelectTextQuestions from "@/components/SingleSelectTextQuestions.vue";
import SingleSelectTextQuestions13 from "@/components/SingleSelectTextQuestions13.vue";
import SingleSelectImageQuestions from "@/components/SingleSelectImageQuestions.vue";
import MultipleSelectTextQuestions from "@/components/MultipleSelectTextQuestions.vue";
import MultipleSelectTextQuestions17 from "@/components/MultipleSelectTextQuestions17.vue";
import TrueOrFalseTextQuestion from "@/components/TrueOrFalseTextQuestion.vue";
import TrueOrFalseImageQuestion from "@/components/TrueOrFalseImageQuestion.vue";
import SpeechRecognitionQuestions from "@/components/SpeechRecognitionQuestions.vue";
import SyllableCountQuestions from "@/components/SyllableCountQuestions.vue";

import moment from "moment";
export default {
  data() {
    return {
      index: 0,
      data: {},
      list: [],
      cur: {},
      startTime: this.getTime(),
      showResultModel: false,
      isResultTrue: true,
    };
  },
  components: {
    SingleSelectTextQuestions,
    SingleSelectTextQuestions13,
    SingleSelectImageQuestions,
    MultipleSelectTextQuestions,
    MultipleSelectTextQuestions17,
    TrueOrFalseTextQuestion,
    TrueOrFalseImageQuestion,
    SpeechRecognitionQuestions,
    SyllableCountQuestions,
  },
  created() {
    this.init();
  },
  computed: {
    getCurrentQuestionView() {
      switch (this.cur.typeId) {
        case 1:
          return SingleSelectTextQuestions;
        case 13:
          return SingleSelectTextQuestions13;
        case 4:
          return MultipleSelectTextQuestions;
        case 14:
          return SingleSelectImageQuestions;
        case 17: // 多选
          return MultipleSelectTextQuestions17;
        case 2:
          return TrueOrFalseTextQuestion;
        case 11: // 阅读单选
          return SingleSelectTextQuestions;
        case 12: // 图对错
          return TrueOrFalseImageQuestion;
        case 7: // 语音识别
          return SpeechRecognitionQuestions;
        case 6: // 音节计数
          return SyllableCountQuestions;
        default:
          return null;
      }
    },
    getResultImage() {
      if (this.isResultTrue) {
        return "../assets/images/correctImg.png";
      } else {
        return "../assets/images/errorImg.png";
      }
    },
  },
  methods: {
    async init() {
      this.$api.question
        .quListByGroupAndUnit({
          groupId: this.$route.query.groupId,
          unitId: this.$route.query.unitId,
          typeId: 1,
        })
        .then((res) => {
          if (res.data.status == 1) {
            this.list = res.data.data.list;
            this.data = res.data.data;
            this.cur = this.list[0];
          }
        });
    },
    getTime() {
      return moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
    },
    goNextQuestion() {
      this.startTime = this.getTime();
      this.cur =
        this.list.length <= this.index ? null : this.list[++this.index];
      this.showResultModel = false;
      if(this.cur==null){
        this.$router.push({ name: "group", query: { partId: this.$route.query.groupId } });
      }
    },
    isEmtpy(answer){
      if (!answer){
        return true;
      }
      if(answer instanceof Array){
        for(var i = 0;i<answer.length;i++){
          if(!answer[i] || answer[i]==''){
            return true;
          }
        }
      }
      return false;
    },
    submitAnswer(answer,answerMp3) {
      if (this.isEmtpy(answer)) {
        alert("请选择答案后再提交!");
        return;
      }
      this.cur.answer = answer;
      this.cur.answer_mp3 = answerMp3;
      this.$api.question
        .submitAnswer({
          groupId: this.$route.query.groupId,
          unitId: this.$route.query.unitId,
          quId: this.cur.quId,
          userTestId: this.data.userTestId,
          startTime: this.startTime,
          endTime: this.getTime(),
          answer: this.cur,
        })
        .then((res) => {

          if (res.data.status == 1) {
            // 如果是练习模式(testType==2)，则显示答题结果.
            // if (this.cur.testType == 2) {

            // }
            if (res.data.data.result == "F") {
              this.isResultTrue = false;
            } else if (res.data.data.result == "T") {
              this.isResultTrue = true;
            }
            this.showResultModel = true;
          } else {
            alert(res.data.msg);
          }
        });
    },
  },
};
</script>
<style lang="css">
.black {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0;
  right: 0;
  z-index: 4;
}
.error {
  position: fixed;
  width: 60%;
  left: 20%;
  bottom: 20%;
  right: 20%;
  top: 20%;
  z-index: 10;
}
.errorImg {
  width: 100%;
  height: 100%;
}
.errorImg img {
  width: auto;
  max-width: 100%;
}
</style>